<template>
	<div>


	<div class="login-content">
     <h3 style="font-weight: normal;">选择地区</h3>
   	<van-steps :active="active" style="margin-bottom: 12px;">
		  <van-step>选择地区</van-step>
		  <van-step>选择机构</van-step>
		  <van-step>选择名称</van-step>
		  <van-step>详细信息</van-step>
	</van-steps>
	<div class="btn_content" >
		  <van-button type="default"
                  v-for="(item,i) in items"
                  :key="i"
                  :class="{'active':isActive==i}"
                  @click="dianji(i,item.cityId)">{{item.name}}</van-button>
	</div>



  </div>
  <div class="btn_submit" @click="next()">
  	   <van-button type="primary" size="large" syle="background-color: #4C9FFD;">下一步</van-button>
  </div>
  </div>

</template>
<script>
	export default{
		data(){
			return{
			    cityId:"",
			    isActive:-1,
				  active:0,
				  items:[]
			}
		},
    mounted:function(){
      this.get_citys();
    },
		methods:{
        next(){
            var cityId = this.cityId;
            if(cityId == ''){
                this.$toast("请选择地区");
                return false;
            }
            this.$router.push({
              path:'/changejigou',
                query:{cityId:this.cityId}
            })
			},
      get_citys(){
        const that = this;
          this.$sendRequest('/login/choiceCity',"").then(function(res){
              console.log(res.data);

              that.items = res.data.result.cityList;
              console.log(that.items);
          })

      },
        dianji(i,cityId){

          this.isActive = i;
          this.cityId = cityId;
        }

		}
	}
</script>

<style scoped="scoped">
	.btn_submit >>> .van-button--primary{
		background: #4C9FFD;
	}
	.login-content{
		padding: 12px;
	}


	.btn_content button{
    width: 43%;
    margin-left: 15px;
    margin-bottom: 17px;
    border:1px solid #4C9FFD;
    color: #4C9FFD;
	}
	.btn_submit{
		position: absolute;
		bottom: 0;
		width: 100%;
	}
  .active{
    background: #4C9FFD;
    color: #ffffff !important;
  }

</style>
